<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07_浮动综合练习</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .main {
            /*background-color: black;*/
            height: 1000px;
        }
        .center {
            margin: 0 auto;
            width: 1000px; /* 设置中心容器的宽度 */
        }
        .f1 {
            margin-bottom: 10px;
            overflow: hidden;
        }
        .f1 .left {
            width: 611px;
            height: 376px; /* 修改为 height 并加上单位 */
            background-color: gray;
            margin-right: 10px;
            float: left; /* 让 left 浮动 */
        }
        .f1 .right {
            width: 375px;
            height: 376px; /* 设置相同的高度 */
            background-color: yellow;
            float: left; /* 让 right 浮动 */
        }
        .f2 {
            overflow: hidden;
        }
        .f2 .left {
            width: 366px;
            height: 233px; /* 设置高度 */
            background-color: pink;
            margin-right: 20px;
            float: left; /* 让 left 浮动 */
        }
        .f2 .card {
            background-color: #0aa1ed;
            float: left;
            width: 198px; /* 添加一个宽度 */
            height: 233px; /* 添加一个高度 */
            margin-right: 8px;
        }
        .f2>.card3{
            margin-right: 0;
        }
    </style>
</head>
<body>
<!--设置最外层的功能块-->
<div class="main">
<!--    版心：固定宽度且居中-->
    <div class="center">
<!--        一楼-->
        <div class="f1">
<!--            一楼左侧-->
            <div class="left"></div>
<!--            一楼右侧-->
            <div class="right"></div>
        </div>
        <div class="f2">
<!--            二楼左侧-->
            <div class="left"></div>
<!--            二楼卡片-->
            <div class="card"></div>
            <div class="card"></div>
            <div class="card card3"></div>
        </div>
    </div>
</div>
</body>
</html>
